{% load i18n %}
{% load static %}

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img src="{% if user.userprofile.picture %}{{ user.userprofile.picture.url }}{% else %}/media/profile_images/no_avatar.jpg{% endif %}"
					alt="User Icon" height="20" width="20" class="pull-left">

                <div class="user-name">
                    <small>{% trans "Hello" %},</small>
                    {{ user }}</div>
            </a>

            <div id="navbar" class="navbar-collapse collapse pull-left">
                <ul class="nav navbar-nav">
                    <li><a href="/main">{% trans "Home" %}</a></li>
                    {% for item in menu %}
                        <li class="dropdown">
                            {% if item.sub_menu %}
                                <a href="{{ item.href }}" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-expanded="false">{{ item.title }}<span class="caret"></span></a>

                                <ul class="dropdown-menu" role="menu">
                                    {% for sub_item in item.sub_menu %}
                                        <li role="presentation"><a
                                                href="{{ sub_item.href }}">{{ sub_item.title }}</a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            {% else %}
                                <a href="{{ item.href }}">{{ item.title }}</a>
                            {% endif %}

                        </li>
                    {% endfor %}

                </ul>
            </div>
        </div>
    </div>
</nav>